<template>
  <div>
    <div class="menu-box">
      <ul class="menu-list">
        <router-link tag="li" to="/home">默认页面</router-link>
        <router-link tag="li" to="/error">错误处理</router-link>
        <router-link tag="li" to="/assets">静态资源处理</router-link>
        <router-link tag="li" to="/style">样式处理</router-link>
        <router-link tag="li" to="/less">动态样式</router-link>
        <router-link tag="li" to="/ajax">ajax非工具应用</router-link>
        <router-link tag="li" to="/axios">axios的使用规则</router-link>
        <router-link tag="li" to="/cors">模块化项目的跨域分类</router-link>
        <router-link tag="li" to="/util">axios工具模块化&Vue全局功能</router-link>
        <router-link tag="li" to="/router">VueRouter</router-link>
        <router-link tag="li" to="/vuex">Vuex</router-link>

      </ul>
    </div>
    <!-- <h5>路由信息对象</h5>
    <input type="button" value="打印激活路由信息对象" @click="printRoute()">
    <hr> -->
    <router-view class="content"></router-view>
    <home-btn v-show=" !$route.meta.hideHomeBtn "></home-btn>
  </div>
</template>

<script>
import HomeBtn from '@/components/HomeBtn.vue'
export default {
  components:{
    HomeBtn
  },
  methods:{
    printRoute(){
        console.log( "$route:",this.$route )
    }
  }
};
</script>

<style scoped>
.menu-box {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 12px black;
  z-index: 99999;
}
.menu-list {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
}
.menu-list > li {
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  height: 100%;
  margin: 0px 10px;
  padding: 0px 10px;
  color: white;
  display: flex;
  align-items: center;
}
.router-link-active{
  background-color: goldenrod;
}
.router-link-exact-active{
  background-color: orangered;
}
.menu-list > li:hover {
  background-color: orangered;
}
.content {
  margin-top: 100px!important;
  padding-bottom: 600px;
}
</style>